<template>
  <div>
    <a-button @click="modal = true"> {{ t["分配"] }}</a-button>

    <a-modal v-model:visible="modal" width="800px" :footer="false" :title="t['分配']">
      <div class="flex gap-4 min-h-[400px]">
        <a-card class="flex-1">
          <a-alert class="mb-2">
            {{ t["将选中的价签转入到指定门店"] }} - <a-tag>{{ keys.length }}</a-tag>
          </a-alert>
          <StoreSelector @change="selectStore" mode="list"></StoreSelector>
          <a-button
            type="primary"
            @click="translateToStore"
            class="mt-2"
            :disabled="!storeId || keys.length === 0"
          >
            {{ t["确定"] }}
          </a-button>
        </a-card>
        <div class="w-[300px]">
          <BulkOperation @success="success" url="/media/device/shift/xlsx">
            <h3>{{ t["上传文件，批量分配"] }}</h3>
          </BulkOperation>
        </div>
      </div>
    </a-modal>

    <a-modal v-model:visible="resultModel" :title="t['结果']">
      <UploadResult v-bind="result" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { mediaShift } from "@/api/service/lcd-device/lcd-device";
import { FileItem } from "@arco-design/web-vue";
const resultModel = ref();
const result = ref();
const t = translate("公共模块");
const props = defineProps<{
  keys: string[];
}>();
const modal = ref();
const storeId = ref<string>();
const translateToStore = async () => {
  if (storeId.value) {
    await mediaShift({
      list: props.keys,
      to: storeId.value
    });
    modal.value = false;
  }
};

const success = (data: FileItem) => {
  resultModel.value = true;
  result.value = data.response?.data;
};
interface SelectedData {
  rowKeys: string[];
  rowKey: string;
}

const selectStore = (data: SelectedData) => {
  storeId.value = data.rowKey;
};
</script>

<style lang="scss" scoped></style>
